<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="通知列表" name="first">
            <div>
                <div class="container">
                    <el-form :inline="true" :model="query" class="demo-form-inline">
                        <el-form-item label="开始时间:">
                            <el-date-picker v-model="query.startTime" type="date" placeholder="开始日期"> </el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束时间:">
                            <el-date-picker v-model="query.endTime" type="date" placeholder="结束日期"> </el-date-picker>
                        </el-form-item>
                        <el-form-item label="通知类型:">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option v-for="item in query.options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="发布者:">
                            <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
                        </el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    </el-form>
                    <div class="handle-box"></div>
                    <el-table
                        :data="tableData"
                        border
                        class="table"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <!-- <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column> -->
                        <el-table-column label="序号" width="55">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="catogeryName" label="通知类别"></el-table-column>
                        <el-table-column label="标题" prop="title" :formatter="stateFormat" width="200"> </el-table-column>
                        <el-table-column label="发送范围" align="center" prop="pubRange"></el-table-column>
                        <el-table-column prop="publisher" label="发布者"></el-table-column>
                        <el-table-column label="发布时间" align="center" prop="time"></el-table-column>
                        <el-table-column label="操作" width="180" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" icon="el-icon-edit" @click="handleShow(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :current-page="query.pageIndex"
                            :page-size="query.pageSize"
                            :total="query.pageTotal"
                            @current-change="handlePageChange"
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="我的发布" name="second">
            <div>
                <div class="container">
                    <el-form :inline="true" :model="myquery" class="demo-form-inline">
                        <el-form-item label="开始时间:">
                            <el-date-picker v-model="myquery.startTime" type="date" placeholder="开始日期"> </el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束时间:">
                            <el-date-picker v-model="myquery.endTime" type="date" placeholder="结束日期"> </el-date-picker>
                        </el-form-item>
                        <el-form-item label="通知类型:">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option v-for="item in myquery.options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="发布者:">
                            <el-input v-model="myquery.name" placeholder="用户名" class="handle-input mr10"></el-input>
                        </el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="myhandleSearch">搜索</el-button>
                    </el-form>
                    <div class="handle-box"></div>
                    <el-table
                        :data="mytableData"
                        border
                        class="table"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <!-- <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column> -->
                        <el-table-column label="序号" width="55">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="catogeryName" label="通知类别"></el-table-column>
                        <el-table-column label="标题" prop="title" :formatter="stateFormat"> </el-table-column>
                        <el-table-column label="发送范围" prop="pubRange" align="center"> </el-table-column>
                        <el-table-column prop="publisher" label="发布者"></el-table-column>
                        <el-table-column label="发布时间" align="center" prop="time"></el-table-column>
                        <el-table-column label="操作" width="180" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" icon="el-icon-edit" @click="handleShow(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :current-page="myquery.pageIndex"
                            :page-size="myquery.pageSize"
                            :total="myquery.pageTotal"
                            @current-change="myhandlePageChange"
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
export default {
    data() {
        return {
            // 当前登录人id
            currLoginId: 0,
            query: {
                address: '',
                startTime: '',
                endTime: '',
                // 搜索通知类型
                options: [],
                name: '',
                // 分页参数
                pageIndex: 1,
                pageSize: 5,
                // 总数
                pageTotal: 0
            },
            // 当前选择通知类型
            value: '',
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            form: {},
            idx: -1,
            id: -1,
            // 默认选中页面
            activeName: 'first',
            value1: '',
            // 我的发布数据
            myquery: {
                address: '',
                startTime: '',
                endTime: '',
                // 搜索通知类型
                options: [],
                name: '',
                // 分页参数
                pageIndex: 1,
                pageSize: 5,
                // 总数
                pageTotal: 0
            },
            // 我的发布数据
            mytableData: []
        };
    },
    created() {
        // 获取通知列表，多条件分页
        this.getData();
        // 获取通知类别
        this.$axios.get('/advice/catogery/get').then((r) => {
            if (r.data.code == 200) {
                this.query.options = r.data.data;
            }
        });
        // 获取当前登陆人id
        this.$axios.get('/auth/admin/getMe').then((r) => {
            if (r.data.code == 200) {
                this.currLoginId = r.data.data.id;
                // 获取我的发布信息
                this.$axios
                    .post('/advice/admin/pages', {
                        pageBean: {
                            currPage: this.query.pageIndex,
                            pageSize: this.query.pageSize
                        },
                        advice: {
                            publisherId: this.currLoginId
                        }
                    })
                    .then((r) => {
                        if (r.data.code == 200) {
                            this.mytableData = r.data.data.data;
                            this.myquery.pageTotal = r.data.data.totalNums;
                        }
                    });
            }
        });
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            this.$axios
                .post('/advice/admin/pages', {
                    pageBean: {
                        currPage: this.query.pageIndex,
                        pageSize: this.query.pageSize
                    },
                    advice: {}
                })
                .then((r) => {
                    if (r.data.code == 200) {
                        this.tableData = r.data.data.data;
                        this.query.pageTotal = r.data.data.totalNums;
                    }
                });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$axios
                .post('/advice/admin/pages', {
                    pageBean: {
                        currPage: 1,
                        pageSize: 10
                    },
                    advice: {
                        startTime: this.query.startTime,
                        endTime: this.query.endTime,
                        adviceCategoryId: this.value,
                        publisher: this.query.name
                    }
                })
                .then((r) => {
                    if (r.data.code == 200) {
                        this.tableData = r.data.data.data;
                        this.query.pageTotal = r.data.data.totalNums;
                    }
                });
        },
        // 我的发布搜索
        myhandleSearch() {
            this.$axios
                .post('/advice/admin/pages', {
                    pageBean: {
                        currPage: 1,
                        pageSize: 10
                    },
                    advice: {
                        startTime: this.myquery.startTime,
                        endTime: this.myquery.endTime,
                        adviceCategoryId: this.value,
                        publisher: this.myquery.name
                    }
                })
                .then((r) => {
                    if (r.data.code == 200) {
                        this.mytableData = r.data.data.data;
                        this.myquery.pageTotal = r.data.data.totalNums;
                    }
                });
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                })
                .catch(() => {});
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },
        // 查看通知详情
        handleShow(row) {
            //console.log(row);
            this.$router.push({path:'/adviceInfo',query: {id:row.id}})
        },
        // 保存编辑
        saveEdit() {
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            this.$set(this.tableData, this.idx, this.form);
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        myhandlePageChange(val) {
            this.$set(this.myquery, 'pageIndex', val);
            this.$axios
                .post('/advice/admin/pages', {
                    pageBean: {
                        currPage: this.myquery.pageIndex,
                        pageSize: this.myquery.pageSize
                    },
                    advice: {
                        startTime: this.myquery.startTime,
                        endTime: this.myquery.endTime,
                        adviceCategoryId: this.value,
                        publisher: this.myquery.name,
                        publisherId: this.currLoginId
                    }
                })
                .then((r) => {
                    if (r.data.code == 200) {
                        this.mytableData = r.data.data.data;
                        this.myquery.pageTotal = r.data.data.totalNums;
                    }
                });
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // 格式化表格消息内容
        stateFormat(row, column, cellValue) {
            // console.log(row , column , cellValue)
            if (!cellValue) return '';
            if (cellValue.length > 10) {
                //最长固定显示4个字符
                return cellValue.slice(0, 10) + '...';
            }
            return cellValue;
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>